<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="iconfont.css">
		<style>
			*{
				padding: 0;
				margin: 0;
				box-sizing: border-box;
				list-style: none;
			}
			body{
				display: flex;
				align-items: center;
				justify-content:center;
				flex-direction: column;
				height: 100vh;
				background-image: linear-gradient(to top,#9795f0 0%,#fbc8d4 100%);
			}
			.shell{
				display: flex;
				align-items: center;
				position: relative;
				padding: 130px 0;
			}
			.carousel{
				position: relative;
				width: 520px;
				height: 500px;
				padding: 150px;
				perspective: 300px;
			}
			.arrows{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				padding: 10px;
				position: absolute;
				right: 15px;
			}
			.up,
			.next{
				margin: 5px 0;
				padding: 5px;
				width: 50px;
				height: 50px;
				border: 3px solid rgb(255,255,255);
				border-radius: 10px;
				background-color: #ffffff61;
				color: #fff;
				transform: .3s;
			}
			.up:hover,
			.next:hover{
				background-color: #fff;
				color: #9795f0;
			}
			.boxs{
				width: 100%;
				height: 210px;
				position: absolute;
				transform-style: preserve-3d;
				transition: 1s;
			}
			.box{
				position: absolute;
				width: 520px;
				height: 200px;
				border:2px solid white;
				border-radius: 10px;
				overflow: hidden;
				opacity: .7;
			}
			 .box img{
				width:100%;
				transform: translateY(-50px);
			}
			.box.selected{
				border-color: goldenrod;
				border-width: 5px;
				opacity: 1;
			} 
			
         .sd{
			 transform: rotateX();
		 }
			
			
		</style>
	</head>
	<body>
	<div class="shell">
		<div class="carousel">
			<ol class="boxs">
				<li class="box"><img src="../inserimg/01.png" alt=""></li>
				<li class="box"><img src="../inserimg/01.png" alt=""></li>
				<li class="box"><img src="../inserimg/01.png" alt=""></li>
				<li class="box"><img src="../inserimg/01.png" alt=""></li>
				<li class="box"><img src="../inserimg/01.png" alt=""></li>
				<li class="box"><img src="../inserimg/01.png" alt=""></li>
				<li class="box"><img src="../inserimg/01.png" alt=""></li>
				<li class="box"><img src="../inserimg/01.png" alt=""></li>
				<li class="box"><img src="../inserimg/01.png" alt=""></li>
				<li class="box"><img src="../inserimg/01.png" alt=""></li>
				<li class="box"><img src="../inserimg/01.png" alt=""></li>
				<li class="box"><img src="../inserimg/01.png" alt=""></li>
				<li class="box"><img src="../inserimg/01.png" alt=""></li>
				<li class="box"><img src="../inserimg/01.png" alt=""></li>
				<li class="box"><img src="../inserimg/01.png" alt=""></li>
				<li class="box"><img src="../inserimg/01.png" alt=""></li>
				<li class="box"><img src="../inserimg/01.png" alt=""></li>
				<li class="box"><img src="../inserimg/01.png" alt=""></li>
				<li class="box"><img src="../inserimg/01.png" alt=""></li>
				<li class="box"><img src="../inserimg/01.png" alt=""></li>
				<li class="box"><img src="../inserimg/01.png" alt=""></li>
				<li class="box"><img src="../inserimg/01.png" alt=""></li>
				<li class="box"><img src="../inserimg/01.png" alt=""></li>
			</ol>
		</div>
		<div class="arrows">
			<button class="up"><i class="iconfont icon-shangjiantou"></i></button>
			<button class="next"><i class="iconfont icon-xiajiantou"></i></button>
		</div>
		
	</div>



	</body>
	<script>
		//获取外层容器
		const shell = document.querySelector('.boxs');
		//获取所有子元素
		const cells = shell.querySelectorAll('.box');
		//获取容器宽度
		const cellWidth = shell.offsetWidth;
		//获取容器高度
		const cellHeight = shell.offsetHeight;
		//设置子元素大小为容器高度
		const cellSize = cellHeight;
		//子元素数量
		const cellCount = 23;
		//计算半径
		const radius = Math.round((cellSize/1.8) /Math.tan(Math.PI /cellCount ));
		//计算每个子元素的角度
		const theta = 360 /cellCount;
		//当前选中的子元素所以
		let seletedIndex = 0;
		function  rotateshell(){
			//计算旋转角度
			const angle = theta * seletedIndex * -1;
			shell.style.transform = 'translateZ('+ -radius + 'px) '+'rotetaX('+ -angle +'deg)';
			const cellIndex = seletedIndex < 0 ?(cellCount -((seletedIndex * -1) % cellCount)):(seletedIndex % cellCount); 
		    cells.forEach((cell,index)=>{
				if(cellIndex === index){
					//添加选中样式
					cell.classList.add('selected');
				}else{
					//移除选中样式
					cell.classList.remove('selected');
					
				}
			});		
		}
		function selectPrev(){
			seletedIndex--;
			rotateshell();
			//console.log("Prev",seletedIndex);
		}
		function selectNext(){
			seletedIndex++;
			rotateshell();
			//console.log("Next",seletedIndex);
		}
		const prevButton = document.querySelector('.up');
		prevButton.addEventListener('click',selectPrev);
		const nextButton = document.querySelector('.next');
		nextButton.addEventListener('click',selectNext);
		function inishell(){
			//console.log("这步有执行")
			cells.forEach((cell,i)=>{
				const cellAngle = theta * i;
				//console.log(cellAngle);
				cell.style.transform = 'rotateX('+ -cellAngle + 'deg) translateZ('+radius+'px)';
				//console.log(as)
			});
			//初始化容器
			rotateshell();
		} 
		inishell();
	</script> 
</html>   